<template>
  <div class="mymuse tanxin">
    <div class="mymuse_l">
      <h3 class="myges">我的歌手 (1)</h3>
      <h3 class="mydiant">我的电台 (1)</h3>
      <h3 class="mygedan tanxin">
        创建歌单 (1)
        <div>
          <span>+</span>
          新建
        </div>
      </h3>
      <Mylist :list="mylovelist" />
      <h3 class="shouchang">收藏歌单 (1)</h3>
      <Mylist :list="myhavekustL" />
    </div>
    <div class="mymuse_r">
      <Teseleirong :listxx="$store.state.gedanxq" />
    </div>
  </div>
</template>

<script>
import { Getursegedan, Getursegedanxq } from "@/request/api";
import Mylist from "@/components/mymuse/Mylist.vue";
import Teseleirong from "@/components/mymuse/Teseleirong.vue";
export default {
  data() {
    return {
      // 我喜欢的歌单
      mylovelist: [],
      // 我收藏的歌单
      myhavekustL: [],
      gedanxiangqid: null,
    };
  },
  components: {
    Mylist,
    Teseleirong,
  },
  created() {
    Getursegedan({ uid: this.$store.state.urseuid }).then((res) => {
      if (res.data.code === 200) {
        this.gedanxiangqid = res.data.playlist[4].id;
        this.mylovelist = res.data.playlist.filter((item) => {
          return item.creator.nickname == "兰夕月" ? item : null;
        });
        this.myhavekustL = res.data.playlist.filter((item) => {
          return item.creator.nickname !== "兰夕月" ? item : null;
        });
        Getursegedanxq({ id: this.gedanxiangqid }).then((res) => {
          if (res.data.code === 200) {
            this.$store.commit("Channegedanxq", res.data.playlist);
          }
        });
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.mymuse {
  width: 1000px;
  margin: 0 auto;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  .mymuse_l {
    width: 240px;
    border-right: 1px solid #ccc;
    .myges,
    .mydiant,
    .mygedan,
    .shouchang {
      margin-left: 20px;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .myges {
      margin-top: 30px;
    }
    .mygedan {
      div {
        width: 52px;
        height: 22px;
        border: 1px solid #ccc;
        border-radius: 5px;
        line-height: 16px;
        font-size: 12px;
        margin-right: 10px;
        span {
          margin-left: 5px;
          color: @red;
          font-size: 20px;
        }
      }
    }
  }
  .mymuse_r {
    width: 740px;
  }
}
</style>